/**
 * 页面中心弹窗效果
 * 
 * 这个脚本提供了在页面中心显示美观弹窗的功能，取代了从右侧滑入的通知。
 * 包含四种类型的弹窗：信息提示、表单弹窗、警告确认和详情查看。
 */

// 全局变量，用于管理当前显示的弹窗
let currentModal = null;

/**
 * 统一的模态对话框处理脚本
 * 提供通用的对话框展示功能，取代原来的侧滑效果
 */

// 创建并显示一个模态对话框
function showModal(title, content, size = 'medium') {
    // 关闭已经存在的对话框
    const existingModals = document.querySelectorAll('.modal-container');
    existingModals.forEach(modal => {
        document.body.removeChild(modal);
    });
    
    // 创建模态对话框容器
    const modalContainer = document.createElement('div');
    modalContainer.className = 'modal-container';
    
    // 创建模态对话框
    const modal = document.createElement('div');
    modal.className = `modal-dialog ${size}`;
    
    // 创建模态对话框头部
    const modalHeader = document.createElement('div');
    modalHeader.className = 'modal-header';
    
    const modalTitle = document.createElement('h3');
    modalTitle.className = 'modal-title';
    modalTitle.textContent = title;
    
    const closeButton = document.createElement('button');
    closeButton.className = 'modal-close';
    closeButton.innerHTML = '&times;';
    closeButton.addEventListener('click', () => {
        closeModal(modalContainer);
    });
    
    modalHeader.appendChild(modalTitle);
    modalHeader.appendChild(closeButton);
    
    // 创建模态对话框内容
    const modalContent = document.createElement('div');
    modalContent.className = 'modal-content';
    
    if (typeof content === 'string') {
        modalContent.innerHTML = content;
    } else {
        modalContent.appendChild(content);
    }
    
    // 组装模态对话框
    modal.appendChild(modalHeader);
    modal.appendChild(modalContent);
    modalContainer.appendChild(modal);
    
    // 添加到文档中
    document.body.appendChild(modalContainer);
    
    // 显示模态对话框（使用setTimeout确保过渡效果）
    setTimeout(() => {
        modalContainer.classList.add('visible');
    }, 10);
    
    // 点击背景关闭对话框
    modalContainer.addEventListener('click', (e) => {
        if (e.target === modalContainer) {
            closeModal(modalContainer);
        }
    });
    
    // 按ESC键关闭对话框
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeModal(modalContainer);
        }
    });
    
    return modalContainer;
}

/**
 * 显示提示信息弹窗
 * @param {string} message - 提示信息内容
 * @param {string} type - 类型（info, success, warning, error）
 * @param {number} duration - 自动关闭时间(毫秒)，设为0则不自动关闭
 */
function showMessage(message, type = 'info', duration = 3000) {
    // 创建消息容器
    const messageContainer = document.createElement('div');
    messageContainer.className = `message-container ${type}`;
    messageContainer.textContent = message;
    
    // 添加到文档中
    document.body.appendChild(messageContainer);
    
    // 显示消息（使用setTimeout确保过渡效果）
    setTimeout(() => {
        messageContainer.classList.add('visible');
    }, 10);
    
    // 设置自动关闭
    setTimeout(() => {
        messageContainer.classList.remove('visible');
        
        // 等待过渡效果完成后移除元素
        setTimeout(() => {
            if (messageContainer.parentNode) {
                messageContainer.parentNode.removeChild(messageContainer);
            }
        }, 300);
    }, duration);
    
    return messageContainer;
}

/**
 * 显示表单弹窗
 * @param {string} title - 弹窗标题
 * @param {string} content - HTML内容，通常是表单元素
 * @param {Function} onConfirm - 确认按钮回调函数
 * @param {Function} onCancel - 取消按钮回调函数
 */
function showFormDialog(title, content, onConfirm, onCancel) {
    // 移除现有弹窗
    removeCurrentModal();
    
    // 创建弹窗
    const modal = document.createElement('div');
    modal.className = 'modal-container';
    
    // 构建弹窗内容
    modal.innerHTML = `
        <div class="modal-content form-modal">
            <div class="modal-header">
                <h3>${title}</h3>
                <button class="modal-close"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                ${content}
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary modal-cancel">取消</button>
                <button class="btn btn-primary modal-confirm">确定</button>
            </div>
        </div>
    `;
    
    // 添加到页面
    document.body.appendChild(modal);
    currentModal = modal;
    
    // 立即显示动画
    setTimeout(() => {
        modal.classList.add('show');
    }, 10);
    
    // 阻止冒泡
    modal.querySelector('.modal-content').addEventListener('click', (e) => {
        e.stopPropagation();
    });
    
    // 绑定关闭按钮事件
    const closeBtn = modal.querySelector('.modal-close');
    closeBtn.addEventListener('click', () => {
        closeModal(modal);
        if (onCancel) onCancel();
    });
    
    // 绑定取消按钮事件
    const cancelBtn = modal.querySelector('.modal-cancel');
    cancelBtn.addEventListener('click', () => {
        closeModal(modal);
        if (onCancel) onCancel();
    });
    
    // 绑定确认按钮事件
    const confirmBtn = modal.querySelector('.modal-confirm');
    confirmBtn.addEventListener('click', () => {
        if (onConfirm) {
            // 收集表单数据
            const formData = {};
            const inputs = modal.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                if (input.name) {
                    if (input.type === 'checkbox') {
                        formData[input.name] = input.checked;
                    } else {
                        formData[input.name] = input.value;
                    }
                }
            });
            onConfirm(formData);
        }
        closeModal(modal);
    });
    
    // 点击背景关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeModal(modal);
            if (onCancel) onCancel();
        }
    });
    
    // 添加ESC键关闭
    const escHandler = (e) => {
        if (e.key === 'Escape') {
            closeModal(modal);
            if (onCancel) onCancel();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);
    
    return modal;
}

/**
 * 显示确认弹窗
 * @param {string} title - 弹窗标题
 * @param {string} message - 确认消息
 * @param {Function} onConfirm - 确认按钮回调函数
 * @param {Function} onCancel - 取消按钮回调函数
 */
function showConfirmDialog(title, message, onConfirm, onCancel) {
    // 移除现有弹窗
    removeCurrentModal();
    
    // 创建弹窗
    const modal = document.createElement('div');
    modal.className = 'modal-container';
    
    // 构建弹窗内容
    modal.innerHTML = `
        <div class="modal-content confirm-modal">
            <div class="modal-header">
                <h3>${title}</h3>
                <button class="modal-close"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <div class="confirm-icon"><i class="fas fa-question-circle"></i></div>
                <p>${message}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary modal-cancel">取消</button>
                <button class="btn btn-primary modal-confirm">确定</button>
            </div>
        </div>
    `;
    
    // 添加到页面
    document.body.appendChild(modal);
    currentModal = modal;
    
    // 立即显示动画
    setTimeout(() => {
        modal.classList.add('show');
    }, 10);
    
    // 阻止冒泡
    modal.querySelector('.modal-content').addEventListener('click', (e) => {
        e.stopPropagation();
    });
    
    // 绑定关闭按钮事件
    const closeBtn = modal.querySelector('.modal-close');
    closeBtn.addEventListener('click', () => {
        closeModal(modal);
        if (onCancel) onCancel();
    });
    
    // 绑定取消按钮事件
    const cancelBtn = modal.querySelector('.modal-cancel');
    cancelBtn.addEventListener('click', () => {
        closeModal(modal);
        if (onCancel) onCancel();
    });
    
    // 绑定确认按钮事件
    const confirmBtn = modal.querySelector('.modal-confirm');
    confirmBtn.addEventListener('click', () => {
        closeModal(modal);
        if (onConfirm) onConfirm();
    });
    
    // 点击背景关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeModal(modal);
            if (onCancel) onCancel();
        }
    });
    
    return modal;
}

/**
 * 显示详情弹窗
 * @param {string} title - 弹窗标题
 * @param {string} content - HTML内容
 * @param {string} size - 弹窗大小 (small, medium, large)
 */
function showDetailDialog(title, content, size = 'medium') {
    // 移除现有弹窗
    removeCurrentModal();
    
    // 创建弹窗
    const modal = document.createElement('div');
    modal.className = 'modal-container';
    
    // 构建弹窗内容
    modal.innerHTML = `
        <div class="modal-content detail-modal ${size}">
            <div class="modal-header">
                <h3>${title}</h3>
                <button class="modal-close"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                ${content}
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary modal-ok">确定</button>
            </div>
        </div>
    `;
    
    // 添加到页面
    document.body.appendChild(modal);
    currentModal = modal;
    
    // 立即显示动画
    setTimeout(() => {
        modal.classList.add('show');
    }, 10);
    
    // 阻止冒泡
    modal.querySelector('.modal-content').addEventListener('click', (e) => {
        e.stopPropagation();
    });
    
    // 绑定关闭按钮事件
    const closeBtn = modal.querySelector('.modal-close');
    closeBtn.addEventListener('click', () => {
        closeModal(modal);
    });
    
    // 绑定确定按钮事件
    const okBtn = modal.querySelector('.modal-ok');
    okBtn.addEventListener('click', () => {
        closeModal(modal);
    });
    
    // 点击背景关闭
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeModal(modal);
        }
    });
    
    return modal;
}

/**
 * 关闭弹窗
 * @param {HTMLElement} modal - 弹窗元素
 */
function closeModal(modal) {
    if (!modal) return;
    
    modal.classList.remove('show');
    modal.classList.add('hide');
    
    setTimeout(() => {
        if (modal.parentNode) {
            modal.parentNode.removeChild(modal);
        }
        if (currentModal === modal) {
            currentModal = null;
        }
    }, 300);
}

/**
 * 移除当前弹窗
 */
function removeCurrentModal() {
    if (currentModal && currentModal.parentNode) {
        currentModal.parentNode.removeChild(currentModal);
        currentModal = null;
    }
} 